<template>
  <div class="home_nav">
    <div class="nav" @scroll="getScroll" ref="nav">
      <div class="nav_wrap">
        <router-link active-class="active" to="/recommend">
          推荐 <span class="bar"></span>
        </router-link>
        <router-link exact active-class="active" to="/home/youshengshu">
          有声书 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/xiangsheng"
          >相声 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/yinyue">
          音乐 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/ertong">
          儿童 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/toutiao">
          头条 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/renwen">
          人文 <span class="bar"></span>
        </router-link>
        <router-link active-class="active" to="/home/qinggan">
          情感 <span class="bar"></span
        ></router-link>
        <router-link active-class="active" to="/home/lishi">
          历史 <span class="bar"></span
        ></router-link>
        <router-link active-class="active" to="/home/keji">
          科技 <span class="bar"></span
        ></router-link>
        <router-link active-class="active" to="/category/">
          更多 <span class="bar"></span
        ></router-link>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState, mapMutations } from "vuex";
export default {
  name: "HomeNav",
  computed: {
    ...mapState(["homenav"]),
  },
  created() {
    this.$nextTick(()=>{
      this.$refs.nav.scrollLeft = this.homenav
    })
    
    // this.$refs.nav.scrollLeft = this.homenav;
  },
  methods: {
    ...mapMutations(["saveHomenav"]),

    getScroll() {
      console.log(this.$refs.nav.scrollLeft);
      this.saveHomenav(this.$refs.nav.scrollLeft);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.home_nav {
  background-color: #fff;
  width: 100%;
  height: 53px;
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav {
    height: 100%;
    height: 100%;
    background-color: #fff;
    overflow-x: auto;
    .nav_wrap {
      border-bottom: 1px solid #efefef;
      height: 100%;
      display: flex;
      a {
        display: block;
        flex-shrink: 0;
        padding: 0 15px;
        // text-align: center;

        line-height: 53px;
        font-size: 15px;
        color: #74747d;
        position: relative;
        transition: all 0.3s;

        .bar {
          height: 3px;
          width: 18px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background-color: #f06742;
          display: none;
        }
      }

      a.active {
        font-size: 19px;
        color: #333;
        font-weight: 500;
      }
      a.active .bar {
        display: block;
      }
    }
  }
}
</style>

